<template>
  <div style="padding: 40px">
    <!-- 编辑弹出窗口 -->

    <el-form
      ref="queryAddForm"
      :model="purchaseEditForm"
      size="small"
      :inline="true"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动名称" prop="title">
            <el-input
              v-model="purchaseEditForm.title"
              placeholder="活动名称"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="扫码有效" prop="isScanCode">
            <template #default>
              <div>
                {{ purchaseEditForm.isScanCode == 1 ? "扫码有效" : "其他" }}
              </div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="关联商户号" prop="mchId">
            <el-input
              v-model="purchaseEditForm.mchId"
              placeholder="关联商户号"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="抽奖次数" prop="mchId">
            <div style="display: flex; align-items: center">
              <el-input
                v-model="purchaseEditForm.min"
                placeholder="最小次数"
                clearable
                min="1"
                disabled
              />
              -
              <el-input
                v-model="purchaseEditForm.max"
                placeholder="最大次数"
                clearable
                min="1"
                disabled
              />
              <p>且</p>
              <el-input
                v-model="purchaseEditForm.text"
                placeholder="条件"
                clearable
                disabled
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="活动地区" prop="provinceId">
            <template #default>
              <el-select
                v-model="purchaseEditForm.provinceId"
                placeholder="活动地区"
                clearable
                multiple
              >
                <el-option
                  v-for="dict in countryList"
                  :key="dict.code"
                  :label="dict.name"
                  :value="dict.code"
                />
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动时间" prop="created">
            <el-date-picker
              v-model="purchaseEditForm.created"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 弹窗表格 -->
    <el-table :data="purchaseEditForm.rewardList" style="width: 100%">
      <el-table-column prop="id" label="奖品id" width="120"> </el-table-column>
      <el-table-column prop="title" label="奖品名称" width="180">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.title"
            placeholder="名称"
            clearable
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column prop="num" label="奖品金额" width="250">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.num"
            placeholder="奖品金额"
            clearable
            type="number"
            min="1"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column prop="effectiveTime" label="激活有效期(h)" width="250">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.effectiveTime"
            placeholder="激活有效期"
            clearable
          >
            <el-option
              v-for="dict in timeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select> </template
      ></el-table-column>
      <el-table-column prop="max" label="库存" width="150">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.max"
            placeholder="库存"
            clearable
            type="number"
            min="1"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增红包奖 -->

    <div class="dialog-footer" slot="footer" style="margin-top: 40px">
      <el-button @click="cancelSetting">返回</el-button>
      <el-button type="primary" @click="confirmSetting">保存设置</el-button>
    </div>
  </div>
</template>

<script>
import china from "../../assets/json/china.json";
import { addActivityPacketReward } from "@/api/activity/index";
export default {
  name: "addActivity",
  data() {
    return {
      purchaseEditForm: {
        title: "叠加活动—激活红包",
        isScanCode: 1,
        mchId: "",
        min: 1,
        max: '1',
        text: "谢谢参与",
        rewardList: [],

        provinceId: "",
      },
      timeList: [
        {
          value: 24,
          label: "24h",
        },
        {
          value: 48,
          label: "48h",
        },
      ],
      // 城市列表
      countryList: [],
    };
  },
  created() {
    this.handleInit();
  },
  methods: {
    handleInit() {
      this.countryList = china.filter((it)=>it.code!=0);
      this.purchaseEditForm.rewardList.push({
        id: 1,
        title: "1.68元红包",
        num: "168",
        effectiveTime: 24,
        max: "",
      });
    },
    cancelSetting() {
      this.$router.push("/red-packet");
    },
    confirmSetting() {
     
      if (
        this.purchaseEditForm.provinceId.length == 0 ||
        this.purchaseEditForm.provinceId == ""
      ) {
        this.$message.error("请设置活动地区");
        return;
      }
      if (
        this.purchaseEditForm.created == undefined ||
        this.purchaseEditForm.created[0] == null ||
        this.purchaseEditForm.created[1] == null
      ) {
        this.$message.error("请设置时间");
        return;
      }
       if(this.purchaseEditForm.rewardList[0].max==''){
        this.$message.error("请设置库存");
        return;
      }

      let params = {
        title: this.purchaseEditForm.rewardList[0].title,
        num: this.purchaseEditForm.rewardList[0].num,
        effectiveTime: this.purchaseEditForm.rewardList[0].effectiveTime,
        max: this.purchaseEditForm.rewardList[0].max,
        startTime: new Date(this.purchaseEditForm.created[0]).getTime(),
        endTime: new Date(this.purchaseEditForm.created[1]).getTime(),
        provinceId: this.purchaseEditForm.provinceId.join(","),
      };
      console.log(this.purchaseEditForm, params);
      addActivityPacketReward(params).then((res) => {
        if (res.code == 0) {
          this.$message.success("保存成功");
          this.$router.push("/red-packet");
        }else{
          this.$message.success("保存失败");
        }
      });
      /**
       * "title": "1.68元红包",
	"num": 168,
	"effectiveTime": 24,
	"max": 2380000,
	"startTime": 1710408398888,
	"endTime": 1735660799000,
	"provinceId": "11,12"
       */
    },
  },
};
</script>

<style scoped lang="scss"></style>
